<template>
    <van-nav-bar title="退货商品" left-text="" left-arrow @click-left="goBack" />
    <section class="aui-flexView">
        <!-- 订单详细 -->
        <section class="aui-scrollView">
            <!-- 订单状态 -->
            <div class="aui-pay-change">
                <div class="aui-flex">
                    <div class="aui-flex-box">
                        <h3>{{ detail.status_text }}</h3>
                    </div>
                    <div class="aui-pay-zfb">
                        <img src="/assets/images/icon-zfb.png" alt="" />
                    </div>
                </div>
            </div>

            <!-- 收货地址 -->
            <div class="aui-flex">
                <div style="font-size: 16px">退货地址：</div>
                <div class="aui-flex-box">
                    <h3>
                        {{ detail.contacts }} <em> {{ detail.telephone }}</em>
                    </h3>
                    <p>{{ detail.address }}</p>
                </div>
            </div>

            <!-- 退货信息 -->
            <van-form @submit="onSubmit">
                <van-cell-group inset>
                    <van-field v-model="address_text" is-link readonly name="picker" label="寄件地址列表" placeholder="点击选择地址"
                        @click="showAddressPicker = true" />
                    <van-popup v-model:show="showAddressPicker" position="bottom">
                        <van-picker :columns="Addresscolumns" @confirm="onAddressConfirm"
                            @cancel="showAddressPicker = false" />
                    </van-popup>
                    <van-field v-model="express_text" is-link readonly name="picker" label="物流公司" placeholder="点击选择物流公司"
                        @click="showExpressPicker = true" />
                    <van-popup v-model:show="showExpressPicker" position="bottom">
                        <van-picker :columns="Expresscolumns" @confirm="onExpressConfirm"
                            @cancel="showExpressPicker = false" />
                    </van-popup>
                    <van-field v-model="expresscode" name="expresscode" label="快递单号" placeholder="请输入快递单号"
                        :rules="[{ required: true, message: '请填写用户名' }]" />
                </van-cell-group>
                <div style="margin: 16px;">
                    <van-button round block type="primary" native-type="submit">
                        提交
                    </van-button>
                </div>
            </van-form>

        </section>
    </section>
</template>
<script setup>
const router = useRouter();
const route = useRoute();
const goBack = () => {
    history.back()
}
const orderid = ref(route.query.orderid ?? 0)
const detail = ref({})
const { cookies } = useCookies();
const LoginUser = reactive(cookies.get("LoginUser") ?? {});
const showAddressPicker = ref(false);
const showExpressPicker = ref(false);
const address_text = ref('')
const express_text = ref('')
const addressid = ref('')
const expressid = ref('')
const expresscode = ref('')
const Addresscolumns = ref([]);
const Expresscolumns = ref([])
const onAddressConfirm = ({ selectedOptions }) => {
    address_text.value = selectedOptions[0]?.text;
    addressid.value = selectedOptions[0]?.value;
    showAddressPicker.value = false;
};

const onExpressConfirm = ({ selectedOptions }) => {
    express_text.value = selectedOptions[0]?.text;
    expressid.value = selectedOptions[0]?.value;
    showExpressPicker.value = false;
};
onBeforeMount(() => {
    getInfoData()
})
const getInfoData = async () => {
    let result = await Api.orderInfo({
        busid: LoginUser.id,
        orderid: orderid.value,
    });
    if (result.code == 1) {
        detail.value = result.data
    }

    let res = await Api.orderRejected({
        busid: LoginUser.id,
    })
    if (res.code == 1) {
        Expresscolumns.value = res.data.expresslist
        Addresscolumns.value = res.data.address
    }
}
const onSubmit = async () => {
    let result = await Api.orderRefundgoods({
        busid: LoginUser.id,
        orderid: orderid.value,
        addressid: addressid.value,
        expressid: expressid.value,
        expresscode: expresscode.value
    })
    if (result.code == 1) {
        showSuccessToast({
            message: result.msg,
            onClose: function () {
                goBack()
            },
        });
    } else {
        showFailToast(result.msg);
    }
}
</script>
<style>
@import url('/assets/css/info.css');
</style>